<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">

      <el-row class="ml10" v-show="showSearch">
        <el-form :inline="true" :model="state.queryForm" ref="queryRef">

          <el-form-item label="社保卡" prop="medicalCard">
            <el-input v-model="state.queryForm.medicalCard" placeholder="请输入社保卡"/>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input placeholder="请输入姓名" style="max-width: 180px" v-model="state.queryForm.name"/>
          </el-form-item>
          <el-form-item>
            <el-button @click="getDataList" formDialogRef icon="search" type="primary">
              {{ $t('common.queryBtn') }}
            </el-button>
            <el-button @click="resetQuery" formDialogRef icon="Refresh">{{
                $t('common.resetBtn')
              }}
            </el-button>
          </el-form-item>

        </el-form>
      </el-row>

      <el-row>
        <div class="mb8" style="width: 100%">
<!--          <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"-->
<!--                     v-auth="'blood_bloodxCustomer_add'">-->
<!--            新增-->
<!--          </el-button>-->
<!--          <el-button plain icon="upload-filled" type="primary" class="ml10" @click="excelUploadRef.show()"-->
<!--                     v-auth="'blood_bloodxCustomer_export'">-->
<!--            导入-->
<!--          </el-button>-->
<!--          <el-button plain icon="Pointer" type="primary" class="ml10" @click="bloodSugar"> 血糖监测录入</el-button>-->
<!--          <el-button plain :disabled="multiple" icon="Delete" type="primary"-->
<!--                     v-auth="'blood_bloodxCustomer_del'" @click="handleDelete(selectObjs)">-->
<!--            删除-->
<!--          </el-button>-->
          <right-toolbar v-model:showSearch="showSearch" :export="'blood_bloodxCustomer_export'"
                         @exportExcel="exportExcel" class="ml10 mr20" style="float: right"
                         @queryTable="getDataList"></right-toolbar>
        </div>
      </el-row>
      <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
                :header-cell-style="tableStyle.headerCellStyle" highlight-current-row
                @current-change="handleCurrentChange" @selection-change="selectionChangHandle"
                @sort-change="sortChangeHandle">
        <el-table-column type="selection" width="40" align="center"/>
        <el-table-column type="index" label="#" width="45"/>
        <el-table-column prop="name" label="姓名" show-overflow-tooltip/>
        <!--        <el-table-column prop="birthday" label="出生日期" width="100" show-overflow-tooltip>-->
        <!--          <template #default="scope">-->
        <!--            {{ scope.row.birthday?.substring(0, 10) }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column prop="age" label="年龄" width="60" show-overflow-tooltip></el-table-column>-->
        <!--        <el-table-column prop="sex" label="性别" width="70" show-overflow-tooltip>-->
        <!--          <template #default="scope">-->
        <!--            <dict-tag :options="gender" :value="scope.row.sex"></dict-tag>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column prop="icCard" label="身份证号" show-overflow-tooltip/>
        <el-table-column prop="tel" label="联系电话" show-overflow-tooltip/>
        <el-table-column prop="address" label="地址" show-overflow-tooltip/>
        <!--        <el-table-column prop="villageName" label="村" show-overflow-tooltip/>-->
        <el-table-column prop="doctorName" label="家庭医生" show-overflow-tooltip/>
        <!-- <template #default="scope">
          <dict-tag :options="village" :value="scope.row.village"></dict-tag>
        </template> -->
        <!--        <el-table-column prop="localCard" label="卡号" show-overflow-tooltip/>-->

        <el-table-column prop="medicalCard" label="社保卡号" show-overflow-tooltip/>
        <!--        <el-table-column prop="examNum" label="次数" show-overflow-tooltip/>-->
        <el-table-column prop="healthStatus" label="管理状态" width="100" show-overflow-tooltip>
          <template #default="scope">
            <dict-tag :options="bloodx_health" :value="scope.row.healthStatus"></dict-tag>
          </template>
        </el-table-column>

        <!-- <template #default="scope">

          <dict-tag :options="family_doctor" :value="scope.row.familyDoctor"></dict-tag>
        </template> -->
        <el-table-column label="并发症" width="100" fixed="right">
          <template #default="scope">
            <el-button icon="edit-pen" text type="primary"
                       @click="bloodxCustomerIllnessDialogRef.openDialog(scope.row)">并发症
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="服药情况" width="110" fixed="right">
          <template #default="scope">
            <el-button icon="edit-pen" text :type="scope.row.drugStatus===1?'warning':'primary'"
                       @click="bloodxCustomerDrugDialogRef.openDialog(scope.row)">
              服药情况
            </el-button>
          </template>
        </el-table-column>

        <el-table-column label="就诊记录" width="110" fixed="right">
          <template #default="scope">
            <el-button icon="Tickets" text type="primary" @click="bloodTicketRef.openDialog(scope.row.id)">就诊记录
            </el-button>
          </template>
        </el-table-column>

        <el-table-column label="基础信息" width="110" fixed="right">
          <template #default="scope">
            <el-button icon="Document" text type="primary" @click="userFormRef.openDialog(scope.row.id)">常规信息
            </el-button>
          </template>
        </el-table-column>

        <!--        <el-table-column label="操作" width="150" fixed="right">-->
        <!--          <template #default="scope">-->

        <!--            <el-button icon="edit-pen" text type="primary" v-auth="'blood_bloodxCustomer_edit'"-->
        <!--                       @click="formDialogRef.openDialog(scope.row.id)">编辑-->
        <!--            </el-button>-->
        <!--            <el-button icon="delete" text type="primary" v-auth="'blood_bloodxCustomer_del'"-->
        <!--                       @click="handleDelete([scope.row.id])">删除-->
        <!--            </el-button>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                  v-bind="state.pagination"/>
    </div>

    <!-- 编辑、新增居民 -->
    <form-dialog ref="formDialogRef" @refresh="getDataList(false)"/>

    <user-form ref="userFormRef"/>

    <!-- 打开并发症页面 -->
    <bloodx-customer-illness-dialog ref="bloodxCustomerIllnessDialogRef"/>

    <!--    打开服药情况-->
    <bloodx-customer-drug-dialog ref="bloodxCustomerDrugDialogRef" @refresh="getDataList(false)"/>

    <!-- 血糖监测  -->
    <blood-form-dialog ref="bloodFormDialogRef"/>

    <!--    就诊记录-->
    <blood-ticket ref="bloodTicketRef"/>

    <!-- 导入居民 -->
    <upload-excel ref="excelUploadRef" title="导入居民" url="/admin/bloodxCustomer/import"
                  temp-url="/admin/sys-file/local/file/bloodxCustomer.xlsx" @refreshDataList="getDataList"/>
  </div>
</template>

<script setup lang="ts" name="systemBloodxCustomer">
import {BasicTableProps, useTable} from '/@/hooks/table';
import {newPage, delObjs} from '/@/api/blood/bloodxCustomer';
import {useMessage, useMessageBox} from '/@/hooks/message';
import {useDict} from '/@/hooks/dict';

// 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
const BloodxCustomerIllnessDialog = defineAsyncComponent(() => import('../otherBloodxCustomerIllness/index.vue'));
const BloodxCustomerDrugDialog = defineAsyncComponent(() => import('../otherBloodxCustomerDrug/index.vue'));
const BloodFormDialog = defineAsyncComponent(() => import('../bloodxCustomerBlood/form.vue'));
const BloodTicket = defineAsyncComponent(() => import('./bloodTicket.vue'));
const UserForm = defineAsyncComponent(() => import('./userForm.vue'));

// 定义字典
const {gender, bloodx_health, village, family_doctor} = useDict('gender', 'bloodx_health', 'village', 'family_doctor');

// 定义变量内容
const formDialogRef = ref();
const bloodxCustomerIllnessDialogRef = ref();
const bloodxCustomerDrugDialogRef = ref();
const bloodFormDialogRef = ref();
const excelUploadRef = ref();
const currentRow = ref();
const bloodTicketRef = ref();
const userFormRef = ref();
// const showIllness = ref(false)
// 搜索变量
const queryRef = ref();
const showSearch = ref(true);
// 多选变量
const selectObjs = ref([]) as any;
const multiple = ref(true);

const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {
    userType: '0',
  },
  // descs: ['update_time'],
  pageList: newPage,
});

//  table hook
const {
  getDataList,
  currentChangeHandle,
  sizeChangeHandle,
  sortChangeHandle,
  downBlobFile,
  tableStyle
} = useTable(state);

// 血糖监测
const bloodSugar = () => {
  if (!currentRow.value) {
    useMessage().warning('请选择一条数据');
    return;
  }
  bloodFormDialogRef.value.openDialog(currentRow.value);
};
const handleCurrentChange = (row: any) => {
  currentRow.value = row;
};

// 清空搜索条件
const resetQuery = () => {
  // 清空搜索条件
  queryRef.value?.resetFields();
  // 清空多选
  selectObjs.value = [];
  getDataList();
};

// 导出excel
const exportExcel = () => {
  state.loading = true
  downBlobFile('/blood/bloodxCustomer/export', Object.assign(state.queryForm, {ids: selectObjs}), 'bloodxCustomer.xlsx');
};

// 多选事件
const selectionChangHandle = (objs: { id: string }[]) => {
  selectObjs.value = objs.map(({id}) => id);
  multiple.value = !objs.length;
};

// 删除操作
const handleDelete = async (ids: string[]) => {
  try {
    await useMessageBox().confirm('此操作将永久删除');
  } catch {
    return;
  }

  try {
    await delObjs(ids);
    getDataList();
    useMessage().success('删除成功');
  } catch (err: any) {
    useMessage().error(err.msg);
  }
};
</script>
